<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌单</title>
    <link rel="stylesheet" href="../css/songs.css">

</head>
<body>
<jsp:include page="header.jsp"></jsp:include>
<c:set var="beginIndex" value="1" scope="session"></c:set>
<c:set var="endIndex" value="5" scope="session"></c:set>
<script src="/js/songs.js"></script>
<div id="singer">
    <div class="leftNav fl">
        <%--华语歌手--%>
        <dl class="area">
            <dd id="all" data-index="0" class="title activeline" onclick="selectSinger(this,1)">
                <a data-index="0"  href="javascript:void(0);" style="font-size: 16px;font-weight: bold;">
                    全部歌手
                </a>
            </dd>
            <dt>
                <span>华语歌手</span>
            </dt>
            <dd data-index="1" onclick="selectSinger(this,1)">
                <a data-index="1" href="javascript:void(0);" >华语男歌手</a>
            </dd>
            <dd data-index="2" onclick="selectSinger(this,1)">
                <a data-index="2" href="javascript:void(0);" >华语女歌手</a>
            </dd>
            <dd class="title" data-index="3" onclick="selectSinger(this,1)">
                <a data-index="3"  href="javascript:void(0);" >华语组合</a>
            </dd>
        <%--日韩歌手--%>
            <dt>
                <span>日韩歌手</span>
            </dt>
            <dd data-index="4"  onclick="selectSinger(this,1)">
                <a data-index="4" href="javascript:void(0);" >日韩男歌手</a>
            </dd>
            <dd data-index="5" onclick="selectSinger(this,1)">
                <a data-index="5" href="javascript:void(0);" >日韩女歌手</a>
            </dd>
            <dd class="title" data-index="6"  onclick="selectSinger(this,1)">
                <a data-index="6" href="javascript:void(0);">日韩组合</a>
            </dd>
        <%--欧美歌手--%>
            <dt>
                <span>欧美歌手</span>
            </dt>
            <dd data-index="7" onclick="selectSinger(this,1)">
                <a data-index="7" href="javascript:void(0);" >欧美男歌手</a>
            </dd>
            <dd data-index="8"  onclick="selectSinger(this,1)">
                <a data-index="8" href="javascript:void(0);">欧美女歌手</a>
            </dd>
            <dd data-index="9"  onclick="selectSinger(this,1)">
                <a data-index="9" href="javascript:void(0);">欧美组合</a>
            </dd>
        </dl>
    </div>
    <div id="right">
        <%--歌手信息--%>
        <!--分页按钮-->
    </div>
    </div>
</div>
<jsp:include page="footer.jsp"></jsp:include>
<script>
    //根据条件分页查询歌手
    function selectSinger(dd,currentPage) {
        <c:set var="musicBegin" value="1" scope="session"></c:set>
        <c:set var="musicEnd" value="5" scope="session"></c:set>
        if(dd != null || dd != undefined){
            $(dd).addClass("activeline").siblings().removeClass("activeline");
        }
        var index = 0;
        var ddArray = $("dd");
        for (var i = 0; i < ddArray.length; i++) {
            if($(ddArray[i]).hasClass("activeline")){
                index = $(ddArray[i]).attr("data-index");
            }
        }
        if(index == "" || index == null){
            index = 0;
        }
        $("#right").load("/singer/selectSinger",{index:index,currentPage:currentPage});
    }
</script>
</body>
</html>
